<template>
    <div>
        <!--        按钮-->
        <el-row>
            <el-col :span="12">
                <el-input
                    placeholder="请输入内容"
                    v-model="param.key"
                    clearable>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="info" icon="el-icon-search" @click="search()">搜索</el-button>
            </el-col>
        </el-row>
        <div  v-for="(v, index) in shop_goods_list" :key="v.username"  :offset="1"  style="text-align: left; font-size: larger; color: deepskyblue">
            <el-divider></el-divider>
            <div style="margin-bottom: 15px">
                <el-row >
                    <el-col>
                        <el-popover
                            placement="right"
                            width="400"
                            trigger="hover">
                            <div class="text item" style="font-size: larger">
                                店铺名:{{v.nickname }}   完成订单数:{{v.order_finished_number}}
                            </div>
                            <div class="text item">地址:{{v.addr }}
                            </div>
                            <div class="text item">联系方式:{{v.telephone }}
                            </div>
                            <div class="text item">简介:{{v.brief }}
                            </div>
                            <el-button slot="reference"  type="text" style="font-size: larger">店铺:{{v.nickname}}</el-button>
                        </el-popover>
                    </el-col>
                    <el-col>
                        <el-avatar :size="50"  shape="square"  :src="v.img">
                        </el-avatar>
                    </el-coL>
                </el-row>
                <el-row   type="flex" justify="start" style="flex-wrap: wrap; flex-direction: row; "  >
                    <el-col  :span="6"  v-for="goods in v.goods" >
                        <el-card shadow="hover" class="el-card"   :body-style="{ padding: '0px'}">
                            <el-row>
                                <el-col  v-show="goods.is_recommended == 1" style="color: red;font-size: larger">本店招牌菜</el-col>
                                <el-col >{{goods.goods_name}}</el-col>
                            </el-row>

                            <div>单价:￥{{goods.goods_price}}</div>
                            <img :src="goods.goods_img" class="image" style="height:160px; width: 120px">
                            <div>
                                <div class="bottom clearfix">
                                    <el-popover
                                        placement="right"
                                        width="400"
                                        trigger="click">
                                        <div class="text item" style="font-size: larger">
                                            菜品名:{{goods.goods_name}}     评价:{{goods.score}}/5.0   参与评价人数：{{goods.score_people}}
                                        </div>
                                        <div class="text item">账户限购:{{goods.goods_count }}
                                        </div>
                                        <div class="text item">销量:{{goods.sellcount }}
                                        </div>
                                        <div class="text item">是否为特色菜:{{goods.is_recommended }}
                                        </div>
                                        <div class="text item">简介:{{goods.brief }}
                                        </div>
                                        <el-button slot="reference"  type="text" style="font-size:small">菜品详情</el-button>
                                    </el-popover>
                                    <el-col><el-button type="text" class="button" @click="addGoodstoCart(v.busid, v.nickname, goods.goods_id, goods.goods_name, goods.goods_img, goods.goods_price)">加入购物车</el-button></el-col>
                                    <el-col> <el-button type="text" class="button" @click="delGoodstoCart(goods.goods_id)">从购物车中删除</el-button></el-col>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!--  设置添加购物车的数量-->
        <el-dialog  title="添加表单" :visible.sync="dialogVisible" width="30%">
            <!--添加菜品种类-->
            <el-form ref="form" :model="Usershopcartform" label-width="80px">
                <el-form-item label="菜品名称">
                    <div>{{Usershopcartform.goods_name}}</div>
                </el-form-item>
                <el-form-item    label="菜品单价">
                    <div>{{price}}</div>
                </el-form-item>
                <el-form-item label="菜品数量">
                    <el-input  type="number" v-model="Usershopcartform.count" min="1"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="CartaddSave">确 定</el-button>
                </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "List",
    data() {
        return {
            param:{
                key:'',
            },
            shop_goods_list:[

            ],
            dialogVisible:false,
            Usershopcartform:{
                userid:-1,
                user_name:'',
                shop_id:-1,
                shop_name:'',
                goods_id:-1,
                goods_name:"",
                goods_img:'',
                count:1,
                status:0,
            },
            price:0,
            delshopcartform:{
                userid:-1,
                goods_id: -1,
            }
        }
    },
    methods: {
        CartaddSave(){
            this.$ajax.get(this.$API.http+"/api/Usershopcart/insert", {params:this.Usershopcartform}).then(res=> {
                    this.msg = res.data.msg;
                    if(res.data.code == 1){
                        this.$msg.success(this.msg);
                        this.dialogVisible = false;
                    }
                    else{
                        this.$msg.error(this.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
        ///打开dialog,并设置数据
        addGoodstoCart(shop_id, shop_name, goods_id, goods_name, goods_img, price){
            this.Usershopcartform.userid = window.sessionStorage.getItem('userid');
            this.Usershopcartform.user_name = window.sessionStorage.getItem('username');
            this.Usershopcartform.shop_id = shop_id;
            this.Usershopcartform.shop_name = shop_name;
            this.Usershopcartform.goods_id = goods_id;
            this.Usershopcartform.goods_name = goods_name;
            this.Usershopcartform.goods_img = goods_img;
            this.price = price;
            this.dialogVisible = true;
        },

        delGoodstoCart(goods_id){
            this.delshopcartform.userid = window.sessionStorage.getItem('userid');
            this.delshopcartform.goods_id = goods_id;
            this.$ajax.get(this.$API.http+"/api/Usershopcart/del", {params:this.delshopcartform}).then(res=> {
                    this.msg = res.data.msg;
                    if(res.data.code == 1){
                        this.$msg.success(this.msg);
                    }
                    else{
                        this.$msg.error(this.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
        edit(info){

        },
        search(){
            this.getShopGoodsList();
        },
        getShopGoodsList(){  ////查询功能，当前有哪些
            this.$ajax.get(this.$API.http+"/api/Userindex/index", {params:this.param}).then(res=> {
                    this.msg = res.data.msg;
                    if(res.data.code == 1){
                        this.shop_goods_list = res.data.shop_goods_list;
                        console.log(this.shop_goods_list);
                    }
                    else{
                        this.$msg.error(this.msg);
                    }
                },
                error => {
                    //请求后更新List的数据
                    window.alert(error);
                }
            )
        },
    }
    ,
    created() {
        this.getShopGoodsList();
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}
.mid{
    margin-top: 25%;
    height: 50%;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}


</style>


